<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--遍历数组-->
    <h2>人员列表</h2>
    <button @click="addPerson">添加一个老刘</button>
    <ul>
        <li v-for="(item, index) in personList" :key="item.id"> <!--key是每一个li节点的唯一标识-->
            {{item.id}}-{{item.name}}-{{item.age}}--{{index}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    const personList = [
        {"id": 1, "name": "周围", "age": 18},
        {"id": 2, "name": "张三", "age": 18},
        {"id": 3, "name": "李四", "age": 20},
        {"id": 4, "name": "王五", "age": 28},
        {"id": 5, "name": "赵六", "age": 30},
    ]

    const vm = new Vue({
        el: "#root",
        data: {
            personList: personList,
        },
        methods: {
            addPerson() {
                this.personList.unshift({"id": 6, "name": "老刘", "age": 58})
            }
        }
    })
</script>

</body>
</html>